<template>
  <div class="seach">
    <div>
      <el-input v-model="input" :placeholder="placeholder" size="medium" @input="change()"
        @keyup.enter.native="seach()"></el-input>
      <!-- 热搜列表 -->
      <div v-if="hotList !== null" class="hotList">
        <div v-for="(item, i) in hotList" :key="i" class="hotItem">
          <div @click="getText(item.first)">{{ item.first }}</div>
          <div @click="getText2(item.name, item.artists[0].name)" v-if="show !== false">
            {{ item.name }} {{ item.artists[0].name }}
          </div>
        </div>
      </div>
    </div>
    <el-button slot="append" icon="el-icon-search" size="medium" type="danger" @click="seach()"></el-button>
    <div class="loading" v-if="loading === true">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  data() {
    return {
      input: '',
      placeholder: '',
      hotList: null, // 热搜列表
      show: false,
      limit: 30,
      offset: 0,
      loading: false,
    };
  },
  mounted() {
    this.getDefault();
    this.getHotList();
  },
  methods: {
    // ...mapMutations(["saveSongList"]),
    ...mapActions(['saveSeachSong', 'saveSeachSongItem', 'saveOpenItem']),
    async getDefault() {
      this.placeholder = null;
      this.$api.defSearch().then((ret) => {
        this.placeholder = ret.data.showKeyword;
        this.input = ret.data.showKeyword;
      });
    },
    // 热搜列表
    async getHotList() {
      this.hotList = null;
      this.$api.searchHot().then((ret) => {
        this.hotList = ret.result.hots;
      });
    },


    getText(e) {
      this.input = '';
      this.input = e;
      this.seach();
    },

    getText2(e, b) {
      this.input = '';
      this.input = e + b;
      this.seach();
    },

    //搜索
    seach: debounce(function () {
      document.querySelector('.header').style.background = '#ec4141';
      // 默认搜索歌曲
      if (this.input === '') {
        this.input = this.placeholder
      }
      this.$api.search({ keywords: this.input, cookie: localStorage.getItem('cookie') }).then((ret) => {
        this.loading = true;
        this.$router.push('/seachPage');
        this.saveOpenItem({ openItem: false });
        window.sessionStorage.setItem('keywords', this.input);
        // 存入获取到的歌曲
        this.saveSeachSong({ seachSong: ret.result.songs });
        // 存入获取到的歌曲数量
        this.saveSeachSongItem({ seachSongItem: ret.result });
        this.loading = false;
      });
    }, 1000),


    // 获取搜索建议
    async change() {
      if (this.input !== '') {
        this.hotList = null;
        this.$api.searchSug({ keywords: this.input, cookie: localStorage.getItem('cookie') }).then((ret) => {
          this.show = true;
          this.hotList = ret.result.songs;
        });
      }
    },
  },
};
</script>

<style scoped>
.seach {
  display: flex;
}

.el-input {
  width: 400px;
}

.seach:hover .hotList {
  display: flex;
}

.el-button {
  margin-left: 5px;
}

.playBar {
  display: flex;
  justify-content: left;
}

.name {
  margin-right: 5px;
}

.artists {
  margin-right: 5px;
}

.hotList {
  width: 400px;
  background: #fff;
  display: none;
  flex-direction: column;
  position: absolute;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 15px;
  box-shadow: 0px 0px 2px #888888;
}

.hotItem {
  margin: 5px;
}

.hotItem:hover {
  color: #ec4141;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.el-icon-loading {
  position: fixed;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #ec4141;
}
</style>
